<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Row class="search-info-style">
      <Col span="6">
        <span>事项类型：</span>
        <Select v-model="searchInfo.org_code" filterable transfer="" style="width: 70%;" @on-change="changeItem1(searchInfo.org_code)">
          <Option :value="item.id" v-for="item in treelist" v-bind:key="item.id">{{item.type_name}}</Option>
        </Select>
      </Col>
      <Col span="6">
        <span>事项名称：</span>
        <Select v-model="searchInfo.item_id" filterable transfer="" style="width: 70%;">
          <Option :value="item.id" v-for="item in eventListSQ" v-bind:key="item.id">{{item.text}}</Option>
        </Select>
      </Col>
      <Col span="6">
        <span>业务编号：</span>
        <Input style="width: 70%;" v-model="searchInfo.code" />
      </Col>
      <Button class="new-btn-sty" @click="searchData(1)" style="margin-right:10px"><Icon type="ios-search" /> 搜索</Button>
      <Button class="new-btn-sty" @click="searchData1()"><Icon type="md-add" /> 刷新</Button>
    </Row>
    <Row class="search-info-style">
      <Col span="6" style="margin-top:10px">
        <span style="text-al">申&nbsp;&nbsp;请&nbsp;&nbsp;人：</span>
        <Input style="width: 70%;" v-model="searchInfo.name" />
      </Col>
      <Col span="6" style="margin-top:10px">
        <span>身份证号：</span>
        <Input style="width: 70%;" v-model="searchInfo.cardno" />
      </Col>
      <Col span="6" style="margin-top:10px">
        <span>电话号码：</span>
        <Input style="width: 70%;" v-model="searchInfo.mobile" />
      </Col>
    </Row>
    <Table :loading="countData.loading" border :columns="columns1" :data="dataList" size="small" ref="table">
      <template slot-scope="{ row }" slot="file_url">
        <Tooltip transfer max-width="300" :content="row.paramstitle" placement="right" style="margin-left:30%;width: max-content;">
          <i class='iconfont icon-tupian' style="font-size:30px;color:orange;margin-right:50px;cursor: pointer;" v-if="(row.url).indexOf('.jpg') != -1" @click="openFile(row.url)"></i>
          <i class='iconfont icon-tupian' style="font-size:30px;color:orange;margin-right:50px;cursor: pointer;" v-if="(row.url).indexOf('.png') != -1" @click="openFile(row.url)"></i>
          <i class='iconfont icon-tupian' style="font-size:30px;color:orange;margin-right:50px;cursor: pointer;" v-if="(row.url).indexOf('.jpeg') != -1" @click="openFile(row.url)"></i>
        </Tooltip>
      </template>
    </Table>
    <Row type="flex" justify="end" class="page_style">
      <Page :current="searchInfo.pageNo" :total="searchInfo.totalRecord" show-sizer :page-size="searchInfo.pageSize" show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
    </Row>
  </Card>
</template>

<script>

import { eventlist, treelist } from '@/api/eventlist'
import { findParamsImgList } from '@/api/mainv3'

export default {
  data () {
    return {
      searchInfo: {
        name: '',
        code: '',
        item_id: '',
        mobile: '',
        org_code: '',
        currentPageNo: 1,
        currentPageSize: 10
      },
      eventListSC: [],
      eventListSQ: [],
      treelist: [],
      loadData: true,
      columns1: [
        { title: '事项编号', key: 'code', align: 'center' },
        { title: '姓名', key: 'name', align: 'center' },
        { title: '联系电话', key: 'mobile', align: 'center' },
        { title: '事项名称', key: 'title', align: 'center' },
        { title: '创建时间', key: 'create_time', align: 'center' },
        { title: '附件', slot: 'file_url', width: 200, align: 'center' }
      ],
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      dataList: []
    }
  },
  methods: {
    searchData (inpageNo) {
      let params = {
        item_id: this.searchInfo.item_id,
        org_code: this.searchInfo.org_code,
        name: this.searchInfo.name,
        cardno: this.searchInfo.cardno,
        mobile: this.searchInfo.mobile,
        code: this.searchInfo.code
      }
      if (inpageNo) {
        this.searchInfo.pageNo = inpageNo
      } else {
        this.searchInfo.pageNo = 1
      }
      this.init(params)
    },
    searchData1 () {
      let params = {
          name: '',
          code: '',
          item_id: '',
          mobile: '',
          org_code: '',
          currentPageNo: 1,
          currentPageSize: 10
      }
      this.init(params)
    },
    init (param) {
      param.pageNo = this.searchInfo.currentPageNo
      param.pageSize = this.searchInfo.currentPageSize
      findParamsImgList(param).then(ret => {
        let result = ret.data
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data.results
          this.countData.fcnum = ret.data.data.totalRecord
          this.loadData = false
          this.searchInfo = {
            pageNo: result.data.pageNo,
            pageSize: result.data.pageSize,
            totalPage: result.data.totalPage,
            totalRecord: result.data.totalRecord,
            name: this.searchInfo.name,
            cardno: this.searchInfo.cardno,
            mobile: this.searchInfo.mobile,
            code: this.searchInfo.code,
            org_code: this.searchInfo.org_code,
            item_id: this.searchInfo.item_id
          }
        } else {
          this.loadData = true
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    changeItem1 (item_type) {
      let that = this
      that.eventListSQ = []
      that.eventListSC.forEach(function (temp1, index) {
        if (temp1.org_code === item_type) {
          that.eventListSQ.push(temp1)
        }
      })
      that.eventListSQ.unshift({ id: 0, text: '全部' })
    },
    // 已有事项列表，页面搜索栏使用
    getItemList () {
      eventlist({}).then(res => {
        console.log(res)
        if (res.data.errcode === 0) {
          this.eventListSC = res.data.data
          this.eventListSC.unshift({ id: 0, text: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项劣列表失败' })
        }
      })
    },
    getTreeList () {
      treelist({}).then(res => {
        if (res.data.errcode === 0) {
          this.treelist = res.data.data
          this.treelist.unshift({ id: '', type_name: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项类型列表失败' })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.searchData()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.searchData(this.params.pageNo)
    }
  },
  mounted () {
    this.searchData()
    this.getItemList()
    this.getTreeList()
  }
}
</script>

<style scoped>
.item1{
  height: 42px;
  line-height: 40px;
}
.card_style {
  height: 100%;
  width: 100%;
  overflow: hidden;
.ivu-card-body {
  padding: 0px;
}
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
.search-info-style {
  margin: 10px;
}
.nopadding .ivu-table-cell {
  padding: 0px 0px;
}
.title {
  text-align: center;
  font-size: 1.5rem;
  padding: 20px;
}
.notice-name {
  line-height: 2.5;
  margin-top: 6%;
}
.notice-context {
  text-indent: 2em;
  line-height: 2.5;
}
.notice-content1 {
  padding: 0 4% 0 12%;
  position:relative;
}
.notice-address {
  text-align: right;
  margin-top: 10%;
}
.notice-address1 {
  text-align: right;
  margin-top: 10px;
}
.notice-date {
  text-align: right;
}
.text-line {
  border-color: #878787;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  text-align: center;
}
.text-line-date {
  border-color: #878787;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  width: 10%;
  text-align: center;
}
.text-line-address {
  border-color: #878787;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  width: 15%;
  text-align: center;
}
.print-btn {
  padding: 15px;
  float: right;
}
.code-img2 {
  height: 120px;
  width: 120px;
  top: 70%;
  left: 4%;
  position: absolute;
}
.code-img1 {
  height: 60%;
  width: 90%;
  margin-left: 5%;
}
.centerimg {
  text-align: center;
}
.pre_img_style {
  height:500px;
  width:auto;
  max-width: 500px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
</style>
